<!DOCTYPE html>
<html>
<head>
    <title>API</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
        <div id="example">
            <div class="box">
                <div class="box-col">
                    <h4>Pane index</h4>
                    <ul class="options">
                        <li>
                            <input id="index" type="text" value="0" class="k-textbox" />
                        </li>
                    </ul>
                </div>
                <div class="box-col">
                    <h4>Resize</h4>
                    <ul class="options">
                        <li>
                             <button id="toggle" class="k-button">Expand/Collapse</button>
                        </li>
                        <li>
                            <input id="size" type="text" value="100px" class="k-textbox" /> <button id="setSize" class="k-button">Set size</button>
                        </li>
                        <li>
                            <input id="min" type="text" value="50px" class="k-textbox" /> <button id="setMinSize" class="k-button">Set minimum size</button>
                        </li>
                        <li>
                            <input id="max" type="text" value="150px" class="k-textbox" /> <button id="setMaxSize" class="k-button">Set maximum size</button>
                        </li>
                    </ul>
                </div>
                <div class="box-col">
                    <h4>Insert</h4>
                    <ul class="options">
                        <li>
                            <button id="appendPane" class="k-button">Append a pane</button>
                        </li>
                        <li>
                            <button id="removePane" class="k-button">Remove pane</button>
                        </li>
                        <li>
                            <button id="insertBefore" class="k-button">Insert before index</button>
                        </li>
                        <li>
                            <button id="insertAfter" class="k-button">Insert after index</button>
                        </li>
                    </ul>
                </div>
            </div>

            <div id="splitter">
                <div id="top_pane">
                    <p>
                        Left pane
                    </p>
                </div>
                <div id="ajax_pane">
                    <!-- content loaded with ajax -->
                </div>
                <div id="bottom_pane">
                    <p>
                        Right pane
                    </p>
                </div>
            </div>

            <script>
                $(document).ready(function() {
                    var splitterElement = $("#splitter"),
                        getPane = function (index) {
                            index = Number(index);

                            var panes = splitterElement.children(".k-pane");

                            if(!isNaN(index) && index < panes.length) {
                                return panes[index];
                            }
                        },
                        setSize = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                                var pane = getPane($("#index").val());

                                if (!pane) return;

                                splitter.size(pane, $("#size").val());
                            }
                        },
                        setMinSize = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                                var pane = getPane($("#index").val());

                                if (!pane) return;

                                splitter.min(pane, $("#min").val());
                            }
                        },
                        setMaxSize = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                                var pane = getPane($("#index").val());

                                if (!pane) return;

                                splitter.max(pane, $("#max").val());
                            }
                        },
                        appendPane = function (e) {
                            splitter.append().html("appended pane");
                        },
                        removePane = function (e) {
                            splitter.remove(splitter.element.children(".k-pane").eq($("#index").val()));
                        },
                        insertBefore = function (e) {
                            splitter.insertBefore({}, splitter.element.children(".k-pane").eq($("#index").val())).html("inserted before");
                        },
                        insertAfter = function (e) {
                            splitter.insertAfter({}, splitter.element.children(".k-pane").eq($("#index").val())).html("inserted after");
                        };

                    $("#toggle").click( function (e) {
                        var pane = getPane($("#index").val());
                        if (!pane) return;

                        splitter.toggle(pane, $(pane).width() <= 0);
                    });

                    $("#setSize").click(setSize);
                    $("#size").keypress(setSize);

                    $("#setMinSize").click(setMinSize);
                    $("#min").keypress(setMinSize);

                    $("#setMaxSize").click(setMaxSize);
                    $("#max").keypress(setMaxSize);

                    $("#appendPane").click(appendPane);
                    $("#removePane").click(removePane);

                    $("#insertBefore").click(insertBefore);
                    $("#insertAfter").click(insertAfter);

                    var splitter = $("#splitter").kendoSplitter({
                        orientation: "horizontal",
                        panes: [
                            { collapsible: true, size: "100px" },
                            { collapsible: false, contentUrl: "../content/web/splitter/ajax/ajaxContent1.html" },
                            { collapsible: true, size: "20%" }
                        ]
                    }).data("kendoSplitter");
                });
            </script>
            <style scoped>
                .box input
                {
                    width: 80px;
                }
            </style>
        </div>


    
    
        <div class='demo-section'>
            <h3>Note:</h3>
            <p>
                Security restrictions prevent this example from working in all browsers when the page is loaded from the file system (via file:// protocol).
                If the demo is not working as expected, please host the Kendo folder on a web server.
            </p>
        </div>
    
</body>
</html>
